<template>
  <div>
    <div
      @click="change"
      class="p-3 m-2 text-gradient bg-gradient-to-br from-orange-600 to-green-200 border-4 border-solid border-blue-500 inline-block cursor-pointer"
    >
      {{ cs }}
    </div>

    <div class="cs">{{ nickName }}</div>

    <span @click="minimize" class="m-2">点击缩小</span>
    <span @click="close" class="m-2">点击关闭</span>
    <span @click="maximize">点击放大</span>

    <button>{{ test }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStoreHook } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { NFC } from 'nfc-pcsc'
const { nickName } = storeToRefs(useUserStoreHook())
const cs = ref('点击改store存储')
const change = () => {
  const math = Math.ceil(Math.random() * 100)
  nickName.value = '名字---' + math
}

const minimize = () => {
  //@ts-ignore
  window.electron.ipcRenderer.send('minimize')
}
const maximize = () => {
  //@ts-ignore
  window.electron.ipcRenderer.send('maximize')
}
const close = () => {
  // @ts-ignore
  window.electron.ipcRenderer.send('close')
}

const nfc = new NFC()

const test = ref('测试')
nfc.on('reader', reader => {
  // disable auto processing
  reader.autoProcessing = false

  console.log(`${reader.reader.name}  device attached`)

  test.value = '机器绑定'

  reader.on('card', card => {
    // card is object containing following data
    // String standard: TAG_ISO_14443_3 (standard nfc tags like MIFARE Ultralight) or TAG_ISO_14443_4 (Android HCE and others)
    // String type: same as standard
    // Buffer atr

    console.log(`${reader.reader.name}  card inserted`, card)
    test.value = '扫描到卡'

    // you can use reader.transmit to send commands and retrieve data
    // see https://github.com/pokusew/nfc-pcsc/blob/master/src/Reader.js#L291
  })

  reader.on('card.off', card => {
    console.log(`${reader.reader.name}  card removed`, card)

    test.value = '卡片离开'
  })

  reader.on('error', err => {
    console.log(`${reader.reader.name}  an error occurred`, err)
  })

  reader.on('end', () => {
    console.log(`${reader.reader.name}  device removed`)
  })
})
</script>

<style lang="scss" scoped>
.cs {
  @apply text-red-600;
}
</style>
